<script setup>

import SvgIcon from "../Svglcon.vue";
import {ref} from "vue";
import Model from "./typeIndexs/model.vue";
import Material from "./typeIndexs/material.vue";
import LightArea from "./typeIndexs/lightArea.vue";
import Hdri from "./typeIndexs/hdri.vue";

const selectType = ref('model')
</script>

<template>
  <div class="bodyCenter">
    <div class="materialManageWrap">
      <div class="materialMangeTitleBar">
        <div>
          <svg-icon name="zh_cn"/>
        </div>

        <div class="title">渲梦工厂物料管理</div>
        <div>
          <svg-icon name="close"/>
        </div>
      </div>
      <div class="materialMangeContainWarp">
        <div class="materialMangeContain">
          <div class="allTypes">
            <el-radio-group v-model="selectType" size="large">
              <el-radio-button label="模型" value="model"/>
              <el-radio-button label="材质" value="material"/>
              <el-radio-button label="光域网" value="lightArea"/>
              <el-radio-button label="HDRI" value="HDRI"/>
            </el-radio-group>
          </div>
          <div class="containStage">
            <model v-if="selectType=='model'"></model>
            <material v-else-if="selectType=='material'"></material>
            <lightArea v-else-if="selectType=='lightArea'"></lightArea>
            <hdri v-else></hdri>
          </div>


        </div>


      </div>


    </div>


  </div>
</template>

<style scoped lang="scss">

.bodyCenter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.materialManageWrap {
  width: 1124px;
  height: 706px;
  box-sizing: border-box;
  border: 1px solid #797979;
  display: flex;
  flex-direction: column;

  .materialMangeTitleBar {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #CCCCCC;

    .title {
      width: 100%;
      font-size: 14px;
      text-align: left;
      color: #999999;
    }
  }

  .materialMangeContainWarp {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-left: 10px;
    background-color: #ececed;

    .materialMangeContain {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-between;


      .allTypes {
        display: flex;

        :deep( .el-radio-button__inner) {
          color: #242424;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          border-top: 0px;
          border-color: #CCCCCC;
        }
      }

      .containStage {
        height: 615px;
        width: 100%;
        border-top: 1px solid #CCCCCC;
        border-left: 1px solid #CCCCCC;
        box-sizing: border-box;
        padding: 5px 0px 5px 0px;
        background-color: white;
      }
    }
  }
}


</style>